<template>
  <div>
    <div class="list-btn">
      产品名称:
      <Input v-model.trim="params.name" placeholder="请输入产品名称" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      状态:
      <Select clearable style="width:200px" v-model="params.status" placeholder="全部">
        <Option value= ''>全部</Option>
        <Option :value=1>上架</Option>
        <Option :value=2>下架</Option>
      </Select>
    </div>
    <div class="list-btn">
      最后操作时间:
      <DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
      <Button
        v-if="list.length<1"
        type="primary"
        style="margin-left:5px;"
        @click="() =>{
           this.$router.push({
             path:'/work/credit/edit',
             query:{title:'新增产品'},
           })
        }">
        新增产品
      </Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>

  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {
        tag: {
          'title': '借贷产品管理',
          'path': '/work/credit/list'
        },
        listTitle: [
          {
            title: "产品名称",
            key: "name",
            align: "left",
            minWidth:120
          },
          {
            title: "产品天数",
            key: "day",
            align: "center",
            minWidth:90,

          },
          {
            title: "金额(元)",
            key: "money",
            align: "center",
            minWidth:80,
            render : (h,params) => {
              return h('div', this.toYuan(params.row.money))
            }
          },
          {
            title: "实际放款金额(元)",
            key: "realMoney",
            align: "center",
            minWidth:130,
            render : (h,params) => {
              return h('div', this.toYuan(params.row.realMoney))
            }
          },
          {
            title: "总费用(元)",
            key: "totalCost",
            align: "center",
            minWidth:100,
            render : (h,params) => {
              return h('div', this.toYuan(params.row.totalCost))
            }
          },
          {
            title: "服务费(元)",
            key: "serviceCharge",
            align: "center",
            minWidth:100,
            render : (h,params) => {
              return h('div', this.toYuan(params.row.serviceCharge))
            }
          },
          {
            title: "利息(元)",
            key: "repayInterest",
            align: "center",
            minWidth:80,
            render : (h,params) => {
              return h('div', this.toYuan(params.row.repayInterest))
            }
          },

          {
            title: "年利率(%)",
            key: "dayRate",
            align: "center",
            minWidth:120,
            render : (h,params) => {
              return h('div',((params.row.dayRate)*100).toFixed(2))
            }
          },
          {
            title: "手续费利率(%)",
            key: "poundageRate",
            align: "center",
            minWidth:120,
            render : (h,params) => {
              return h('div',((params.row.poundageRate)*100).toFixed(2))
            }
          },
          {
            title: "逾期日利率(%)",
            key: "overdueDayRate",
            align: "center",
            minWidth:120,
            render : (h,params) => {
              return h('div',((params.row.overdueDayRate)*100).toFixed(2))
            }

          },
          /*   {
               title: "违约金日利率",
               key: "penaltyDayRate",
               align: "center",
               minWidth:120,
             },*/
          {
            title: "创建时间",
            key: "createTime",
            align: "center",
            minWidth:150,
            render:(h,params) => {
              return h('div',this.getLocalTime(params.row.createTime))
            }
          },
          {
            title: "最后操作时间",
            key: "updateTime",
            align: "center",
            minWidth:150,
            render:(h,params) => {
              return h('div',params.row.updateTime ? this.getLocalTime(params.row.updateTime) : '—')
            }
          },
          {
            title: "状态",
            key: "status",
            align: "center",
            minWidth:80,
            render:(h,params) => {
              let status = '';
              let btnType = '';
              switch (params.row.status){
                case 0 :
                  status = '未发布';
                  btnType = 'warning';
                  break;
                case 1:
                  status = '已上架';
                  btnType = 'success';
                  break;
                case 2:
                  status = '已下架';
                  btnType = 'error'
                  break;
              }
              return h('Button',{
                props: {
                  type: btnType,
                  size: 'small'
                }
              }, status)
            }
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            minWidth:130,
            render: (h, params) => {
              let title = params.row.status == 2 ? '上架' : '下架';
              let status = params.row.status == 2 ? 1 : 2;
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    style: {
                      marginRight: "6px"
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '提示',
                          content: `<p>是否${title}该产品?</p>`,
                          onOk: () => {
                            let data = JSON.parse(JSON.stringify(params.row))
                            data.status = status;
                            this.ok(data);
                            //this.delItem('/bkproduct/discard', {id: params.row.id})
                          },
                          onCancel: () => {
                          }
                        });
                      }
                    }
                  },
                  title
                ),

              ]);
            }
          }
        ],
        url:'/bkproduct/list',
        nameListUrl: '',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
      }
    },
    mounted() {

    },
    methods: {

      resetValidate(name) { //清空判断
        this.$refs[name].resetFields();
      },
      ok(status) {
        let data = {
          id:status.id,
          name:status.name,
          money:status.money,
          realMoney:status.realMoney,
          day:status.day,
          dayRate:status.dayRate,
          poundageRate:status.poundageRate,
          overdueDayRate:status.overdueDayRate,
          penaltyDayRate:status.penaltyDayRate,
          merchantId:status.merchantId,
          status: status.status
        };
        this.$post('/bkproduct/modify', data).then(
          res => {
            if (res.code === 0) {
              console.log(res, "edit");
              this.$Message.success(`操作成功！`);
              this.getList(this.url);
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      cancel() {
        this.showModal = false;
      },

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
  /deep/ .ivu-modal-footer{
    display: none;
  }
  /deep/ textarea.ivu-input{
    height:260px;
  }
</style>
